<template>
  <view class="info-sharing-list">
    <!-- 返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">个人信息共享清单</view>
    </view>

    <!-- 个人信息共享列表 -->
    <view class="list-container">
      <tn-list-view class="list-view" :card="true" unlined="all">
        <tn-list-cell 
          v-for="(item, index) in sharingItems" 
          :key="index"
          :title="item.title"
          :arrow="true"
          @click="viewDetails(item)"
        >
          <view class="info-content">
            <text>{{ item.description }}</text>
          </view>
          <view class="info-footer">
            <text>共享时间: {{ item.sharedTime }}</text>
            <tn-button 
              backgroundColor="tn-bg-danger" 
              class="revoke-btn"
              @click="toggleSharing(item, index)" 
            >
              {{ item.isRevoked ? '共享' : '撤销共享' }}
            </tn-button>
          </view>
        </tn-list-cell>
      </tn-list-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sharingItems: [
        { id: 1, title: "AMSP服务", description: "AMSP服务使用您的身份信息进行用户验证", sharedTime: "2024-05-28", isRevoked: false },
        { id: 2, title: "合作伙伴", description: "与AMSP合作的第三方服务", sharedTime: "2024-05-29", isRevoked: false },
        // 更多共享项...
      ],
    };
  },
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 查看详细信息
    viewDetails(item) {
      uni.navigateTo({
        url: `/pages/info-details?id=${item.id}`
      });
    },
    // 切换共享状态
    toggleSharing(item, index) {
      if (item.isRevoked) {
        item.isRevoked = false;
        item.sharedTime = new Date().toLocaleString(); // 更新共享时间为当前时间
      } else {
        item.isRevoked = true;
      }
    }
  }
};
</script>

<style scoped>
.info-sharing-list {
  padding: 20px;
  background-color: #f5f5f5; /* 轻微灰色背景 */
  height: 100%;
}

.header {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10%; /* 增加顶部内边距，确保标题不会被返回按钮遮挡 */
}

.page-title {
  font-size: 30px;
  font-weight: bold;
  position: relative; /* 修改为相对定位 */
  left: 0; /* 重置左偏移 */
  transform: none; /* 重置变换效果 */
  margin-top: 20px; /* 增加顶部外边距，确保标题不会被返回按钮遮挡 */
  color: #333;
  letter-spacing: 1px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.list-container {
  background-color: white; /* 内容区的背景色 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-top: 40px;
}

.list-view {
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

tn-list-cell {
  padding: 15px 20px;
  font-size: 18px;
  color: #555;
  border-bottom: 1px solid #f1f1f1;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

tn-list-cell:last-child {
  border-bottom: none;
}

tn-list-cell:hover {
  background-color: #f0f0f0;
}

tn-list-cell:active {
  background-color: #e0e0e0;
}

.info-content {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.revoke-btn {
  font-size: 16px;
  color: #fff;
  background-color: #ff4d4d;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.revoke-btn:active {
  background-color: #ff174d;
}
</style>